import React, { useState } from 'react'
import { Tabbar } from 'react-vant'
import { useNavigate, Outlet, useLocation } from "react-router-dom"
import { HomeO, Contact, ChatO, SendGiftO, OrdersO } from '@react-vant/icons'

export default function Home() {
  const navigate = useNavigate()
  let loname = useLocation().pathname
  const [name, setName] = useState(loname || '/show/index')
  
  let uproute = (value) => {
    setName(value)
    
    if (value === "/show/index") {
      navigate("index")
      return
    } else if (value === "/show/cate") {
      navigate("cate")
      return
    } else if (value === "/show/mess") {
      navigate("mess")
      return
    } else if (value === "/show/cart") {
      navigate("cart")
      return
    } else if (value === "/show/mine") {
      navigate("mine")
      return
    } else {
      navigate("/login")
      return
    }
  }




  return (
    <div id='app'>
      <Outlet></Outlet>
      <Tabbar
        style={{
          '--rv-tabbar-height': '1rem',
          '--rv-tabbar-item-font-size': '0.3rem',
          '--rv-tabbar-item-line-height': '0.3rem',
          '--rv-tabbar-item-icon-size': '0.4rem'
        }}
        activeColor='#000' inactiveColor='#a4acb9' value={name} onChange={(value) => { uproute(value) }}>
        <Tabbar.Item name="/show/index" icon={<HomeO />} >首页</Tabbar.Item>
        <Tabbar.Item name="/show/cate" icon={<SendGiftO />} >买花</Tabbar.Item>
        <Tabbar.Item name="/show/cart" icon={<OrdersO />} >购物车</Tabbar.Item>
        <Tabbar.Item name="/show/mess" icon={<ChatO />} >消息</Tabbar.Item>
        <Tabbar.Item name="/show/mine" icon={<Contact />} >我的</Tabbar.Item>
      </Tabbar>
    </div>
  )
}

